Ok, I am a college student studying for webpage design, and am working on a website for class. However me and my instructor both are stumped on this one problem. I have a graphic as a background and its fixed. I am then wanting to place on top of that a table or box that would contain text. But that box I’m wanting to make it semi transparent so the graphic in the far background is still seen. (and I would prefer placeing these inside of div tags). We have created the semi transparent background in adobe photoshop and in fireworks, and the only time it ever worked was when we saved the background as a png file and opened it in the firefox browser. But of course Explorer does not recognize png files. jpg wont work because it doesnt recognize transparency. and for some reason gif wont work either. I am so confused. can anyone help?

ps- we are using dreamweaver 8 to build the site.

Karabear

You have to use an IE-specific CSS tag, filter along with PNG images. You want to serve any non-IE browser the regular PNG (as they can handle the transparency) and use IE’s Conditional Comments system to serve it the DirectX Filtered image and disable the other normal BG.

Here’s an example from one of my sites:

Hope this helps! :)

OR: nongraphic, pure css solution:

(for 75% transparent bg)
1st part,filter:alpha(opacity=25); is for IE, middle for older zillas, last one, opacity:.25; is css3 thingy, now enough for FF and such.

here you can see working example, code is minimal, feel free.
http://h1.ripway.com/orcrist/pozišnpozišn.html
i have black background, but ofcourse you can use image as bg too, and it will be transparent.

problem is there is no way to reverse that transparency for child elements, so if you want to have full opacity text over semi-transparent bg, youll have to do separate elements, and aply positioning like on the link above.
for more about the same, google mandarine design/css opacity.

So what code would I place in DW 8 for this:

I have 4 png images in 4 layers over a banner - they all work well in everything but IE, where IE puts an ugly box with fill in the BG (on a PC) or it misaligns the layers WAY off (on a MAC)...could you show me the code I would need to rectify this and where would I place it?

http://www.enhancedwireless.net/index.html

(mouse over the 4 devices in top banner)

Thanks very much

KB

code from my post above youd aply to element that carries picture you want to make partialy transparent. 

but thats not best solution for what you need. for that “ordinary” transparency is enough, since what you need seams to be full transparent background on couple of images, right? and thats not something youd do in DW, but rather in your image editor, select color you want to make transparent and set its opacity to zero. im sure youll find detailed instructons in manual.

but here we were talking about partial, semi transparent bg, and thats better achieved with css then grafics, inspite differences in browsers: thats why there are 3 expresions for 3 diff types/generations of browsers. add to it another, khtml-opacity for konqueror (and safari?) and you got almost all of them covered.

your alignement problems, again,  how that does anything to do at all with transparency?
first try to make a valid html code out of that mess, i guess it would help solve positioninig. or at least it would ease up sarch for mistake. and dont relay on dw to do so. to be honest, with about 200 errors im surprised that page shows anything at all.
png transparency is not suported in IE, so there no “cure” for it, other than wait and see what ie7 will offer you.

Thanks for reply but I’m just trying to understand the bit about DXImageTransform.Mircosoft.AlphaImageLoader and how that might be used in MY situation.

<!—[if IE]>
<style>
.storybody {
  filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=‘images/trans-cccccc.png’,sizingMethod=‘scale’);
  width: 100%;
  background-image: none;
}
</style>
<![endif]—>

Thanks
KB